<template>
  <div class="classificationOuter">
    <!-- 面包屑导航 -->
    <div class="tagTop">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/layout/portal' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 标题 -->
    <h3 class="title">分类管理</h3>
    <!-- 内容区 -->
    <div class="classification">
      <div class="classification_top">
        <!-- 搜索分类 -->
        <div class="classification_search">
          <el-input v-model="keyWord" placeholder="请输入分类关键字" clearable />
          <el-button type="primary" @click="searchCategory" plain>
            搜索
          </el-button>
        </div>

        <!-- 添加分类 -->
        <div class="classification_addBtn">
          <el-button type="primary" round @click="categoryAdd">
            添加分类
          </el-button>
        </div>
      </div>
      <!-- 分类列表 -->
      <div class="classification_list">
        <el-table height="400" :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" type="index" index="index" width="80" />
          <el-table-column align="center" prop="categoryName" label="分类名称" width="230" />
          <el-table-column align="center" prop="createTime" label="创建时间" width="230" />
          <el-table-column align="center" prop="updateTime" label="修改时间" width="230" />
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="Edit" circle @click="updateCategory(scope.row)" />
              <el-button type="danger" :icon="Delete" circle @click="delCategory(scope.row._id)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <!-- 弹出框 -->
  <el-dialog v-model="dialogFormVisible" :title="popTitle">
    <el-form :model="form">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="popConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ArrowRight, Delete, Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { timeChange } from '../../hooks/index'
import {
  getCategoryApi,
  addCategoryApi,
  upCategoryApi,
  delCategoryApi,
} from "../../service/apiModule/categoryApi";

onMounted(() => {
  getCategory({ categoryName: "" });
});

// 分类列表序号
const indexMethod = (index: number) => {
  return index;
};

// 分类列表数据
const tableData = ref([
  {
    categoryName: "",
    categoryNum: 0,
    createTime: 0,
    updateTime: 0,
    _id: "",
  },
]);

// 获取全部分类数据
const getCategory = async (data: Object) => {
  const { data: res } = await getCategoryApi(data);
  if (res.status.code !== 200) {
    if (res.status.code === 2012) {
      tableData.value = [];
      ElMessage.info(res.status.msg);
    } else {
      ElMessage.error("分类数据查询失败!");
    }
  } else {
    ElMessage.success("分类数据获取成功!");
    res.data.list.forEach((item: any) => {
      item.createTime = timeChange(item.createTime)
      item.updateTime = timeChange(item.updateTime)
    })
    tableData.value = res.data.list;
  }
};

// 分类搜索关键字
const keyWord = ref("");

// 搜索
const searchCategory = () => {
  getCategory({ categoryName: keyWord.value });
};

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const form = reactive({
  name: "",
});

// 弹窗类别 - 默认添加
let popFlag = ref(false);
// 弹窗标题
let popTitle = ref("");

// 添加分类
const categoryAdd = () => {
  popFlag.value = false;
  popTitle.value = "添加分类";
  dialogFormVisible.value = true;
};

// 删除分类
const delCategory = async (id: String) => {
  const { data: res } = await delCategoryApi({ id });
  if (res.status.code !== 200) {
    ElMessage.error("删除失败!");
  } else {
    ElMessage.success("删除成功!");
    getCategory({ categoryName: "" });
  }
};

const upData = reactive({
  id: "",
  categoryName: "",
});

// 修改分类
const updateCategory = (data: any) => {
  upData.categoryName = data.categoryName;
  upData.id = data._id;

  popFlag.value = true;

  popTitle.value = "修改分类";

  form.name = data.categoryName;

  dialogFormVisible.value = true;
};

// 弹框确定
const popConfirm = async () => {
  if (popFlag.value === false) {
    if (form.name === "") {
      ElMessage.info("请输入分类名!");
    } else {
      const { data: res } = await addCategoryApi({ categoryName: form.name });
      if (res.status.code !== 200) {
        ElMessage.error("分类添加失败!");
      } else {
        ElMessage.success("分类添加成功!");
        getCategory({ categoryName: "" });
        dialogFormVisible.value = false;
      }
    }
  } else {
    if (form.name === "") {
      ElMessage.info("分类名不可为空!");
    } else {
      upData.categoryName = form.name;
      const { data: res } = await upCategoryApi(upData);
      if (res.status.code !== 200) {
        ElMessage.error("分类修改失败!");
      } else {
        ElMessage.success("修改成功!");
        getCategory({ categoryName: "" });
        dialogFormVisible.value = false;
      }
    }
  }
};

// 分页数据
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
let total = ref(20);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
$H: 91vh;

.classificationOuter {
  width: 100%;
  height: $H;
  background-color: rgb(243, 243, 243);
  padding: 20px;

  .tagTop {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 10px;
    border-radius: 10px;
  }

  .title {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .classification {
    background-color: #fff;
    padding: 10px 0 0 10px;
    border-radius: 10px;
    min-height: 60%;
    max-height: 76%;

    .classification_top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 30px 10px 10px;

      .classification_search {
        width: 26%;
        display: flex;
        align-items: center;

        &>.el-input {
          margin-right: 6px;
        }
      }
    }
  }

  .demo-pagination-block {
    height: 52px;
    background-color: #fff;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    position: relative;

    .el-pagination {
      position: absolute;
      right: 10px;
    }
  }
}
</style>
